<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>News Carousel</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<link rel="stylesheet" media="all" href="style/type/puritan.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/css/ie7.css" media="all" />
<![endif]-->
<script type="text/javascript" src="style/js/jquery-1.5.min.js"></script>
<script type="text/javascript" src="style/js/jquery.jcarousel.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    // Initialise the first and second carousel by class selector.
	// Note that they use both the same configuration options (none in this case).
	jQuery('.d-carousel .carousel').jcarousel({
        scroll: 1
    });
});
</script>
</head>
<body>
  
  <!-- Begin Wrapper -->
  <div id="wrapper">
  
    <div class="d-carousel">
      <ul class="carousel">
        <li> <a href="#"><img src="style/images/carousel.jpg" alt="" /></a>
          <h4><a href="#">1 Cras varius, sapien egetory sagittis</a></h4>
          <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. Morbi sit amet odio tincidunt. Maecenas est felis, semper in accumsan. </p>
        </li>
        <li> <a href="#"><img src="style/images/carousel.jpg" alt="" /></a>
          <h4><a href="#">2 Cras varius, sapien egetory sagittis</a></h4>
          <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. Morbi sit amet odio tincidunt. Maecenas est felis, semper in accumsan. </p>
        </li>
        <li> <a href="#"><img src="style/images/carousel.jpg" alt="" /></a>
          <h4><a href="#">3 Cras varius, sapien egetory sagittis</a></h4>
          <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. Morbi sit amet odio tincidunt. Maecenas est felis, semper in accumsan. </p>
        </li>
        <li> <a href="#"><img src="style/images/carousel.jpg" alt="" /></a>
          <h4><a href="#">4 Cras varius, sapien egetory sagittis</a></h4>
          <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. Morbi sit amet odio tincidunt. Maecenas est felis, semper in accumsan. </p>
        </li>
        <li> <a href="#"><img src="style/images/carousel.jpg" alt="" /></a>
          <h4><a href="#">5 Cras varius, sapien egetory sagittis</a></h4>
          <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. Morbi sit amet odio tincidunt. Maecenas est felis, semper in accumsan. </p>
        </li>
        <li> <a href="#"><img src="style/images/carousel.jpg" alt="" /></a>
          <h4><a href="#">6 Cras varius, sapien egetory sagittis</a></h4>
          <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. Morbi sit amet odio tincidunt. Maecenas est felis, semper in accumsan. </p>
        </li>
        <li> <a href="#"><img src="style/images/carousel.jpg" alt="" /></a>
          <h4><a href="#">7 Cras varius, sapien egetory sagittis</a></h4>
          <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. Morbi sit amet odio tincidunt. Maecenas est felis, semper in accumsan. </p>
        </li>
        <li> <a href="#"><img src="style/images/carousel.jpg" alt="" /></a>
          <h4><a href="#">8 Cras varius, sapien egetory sagittis</a></h4>
          <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. Morbi sit amet odio tincidunt. Maecenas est felis, semper in accumsan. </p>
        </li>
      </ul>
    </div>
    <div class="clear"></div>
  </div>
  
  <!-- End Wrapper -->


</body>
</html>